
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <!-- 
            v-model 指令的本质 
            <input v-bind:value="msg" v-on:input="msg=$event.target.value">
            使用 v-bind 绑定value的值, 用 v-on绑定input标准事件=> 通过 $event获取输入域的最新的值,赋值到原来的值
        -->
        <div v-text='msg'></div>
        <div><input type="text" v-bind:value='msg' v-on:input='handle'></div>
        <!-- $event 表示的是事件对象, 这里限定的是 input 事件 -->
        <div><input v-bind:value="msg" v-on:input="msg=$event.target.value"> </div>
        <div><input v-model='msg'></div>
        
    </div>

    <script type="text/javascript">
       var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                handle:function(event){
                    // 使用输入域中的最新的数据覆盖原来的数据
                    this.msg = event.target.value;
                }
            }
       })      
       
    </script>
</body>
</html>


       